<template>
  <div id="dql">
    <div class="dql-tree">
      <el-card>
        <el-input v-model="name" placeholder="请输入系统名称" suffix-icon="el-icon-search" clearable></el-input>
      </el-card>
    </div>
    <div class="dql-main">
      <el-card>
        <!-- 内容区头部 -->
        <div class="dql-main-title">
          <span>数据库名</span>
          <span>表总共（个）</span>
          <span>视图总共（个）</span>
        </div>
        <!-- 分割线 -->
        <el-divider>查询</el-divider>
        <!-- 查询条件 -->
        <el-form :inline="true" :model="condition" class="demo-form-inline">
          <el-form-item label="表/视图中文名">
            <el-input v-model="condition.ChName" placeholder="请输入···"></el-input>
          </el-form-item>
          <el-form-item label="表/视图英文名">
            <el-input v-model="condition.EnName" placeholder="请输入···"></el-input>
          </el-form-item>
          <el-form-item label="最近采集日期">
            <el-input v-model="condition.latestDate" placeholder="请输入···"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="ChName"
            label="表/视图中文名"
            align="center"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="EnName"
            label="表/视图英文名"
            align="center"
            header-align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
            header-align="center">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              <el-button type="text" size="small">详情</el-button>
              <el-button type="text" size="small">增量</el-button>
              <el-button type="text" size="small">全量</el-button>
              <el-button type="text" size="small">历史</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <el-dialog
      title="详情页面"
      :visible.sync="detailVisible">
      <el-row>
        <el-col :span="12">表/视图名：</el-col>
        <el-col :span="12">数据量（万）：</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">字段总数：</el-col>
        <el-col :span="12">最近采集日期：</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'DQL',
    data() {
      return {
        name: null,
        condition: {},
        tableData: [
          {ChName: '张三', EnName: 'zs'}
        ],
        detailVisible: true
      }
    },
    methods: {
      onSubmit() {

      },
      handleClick(row) {

      }
    },
  }
</script>

<style lang="scss" scoped>
  #dql {
    display: flex;
    height: 100%;
    // 左边树结构样式
    .dql-tree {
      width: 250px;
      min-width: 250px;
      margin-right: 10px;
      .el-card {
        height: 100%;
      }
    }
    // 主要内容区样式
    .dql-main {
      flex: 1;
      min-width: 1046px;
      .el-card {
        height: 100%;
        .dql-main-title {
          display: flex;
          justify-content: space-evenly;
          margin-top: 10px;
        }
        .el-divider {
          margin: 45px 0;
        }
        .el-form {
          margin-bottom: 20px;
          .el-input {
            width: 160px;
            margin-right: 20px;
          }
        }
      }
    }
   
  }
</style>

<style scoped>
  >>>.el-dialog__header {
    border-bottom: 1px solid gray;
    padding-bottom: 20px;
  }
</style>